<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Canvas ARC</title>
<style>
	body {
		margin: 0px;
		padding: 0px;
	}
	
	canvas{
		background: red;
	}
</style>
</head>
<body>

<canvas id="myCanvas" width="578" height="250"></canvas>

<script>
	var canvas = document.getElementById('myCanvas');
	var context = canvas.getContext('2d');
	
	context.beginPath();
	context.moveTo(170, 80);
	context.bezierCurveTo(130, 100, 130, 150, 230, 150);
	context.bezierCurveTo(250, 180, 320, 180, 340, 150);
	context.bezierCurveTo(420, 150, 420, 120, 390, 100);
	context.bezierCurveTo(430, 40, 370, 30, 340, 50);
	context.bezierCurveTo(320, 5, 250, 20, 250, 50);
	context.bezierCurveTo(200, 5, 150, 20, 170, 80);
	
	// complete custom shape
	context.closePath();
	context.lineWidth = 5;
	context.strokeStyle = 'blue';
	context.stroke();
</script>

</body>
</html>